<template>
	<view class="page" :style="pageStyle">
		<view v-if="showAd" style="width: 250px; height: 250px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;">
			<u-icon @click="closeAd" name="close" style="position: absolute; top:4%;right: 4%; z-index: 99999;"></u-icon>
			<u-image :src="imgSrc" width="250px" height="250px" showMenuByLongpress="true" @click="previewImg"></u-image>
		</view>
		<!-- <card @closeAd="closeAd()" v-if="showShadow"style="z-index:1000"></card> -->
		<view v-if="show === 1">
			<!-- 选择学院 ——start -->
			<view class="head">
				<view class="lable">
					<view class="iconfont icon-064dangqianweizhi" style="color:#DC143C;font-size: 32rpx;"></view>
					<text>所在学院：</text>
				</view>
				<picker class="itemPicker" @change="collegeChange" :value="collegeIndex" :range="collegeArray">
					<view class="uni-input">{{collegeArray[collegeIndex]}}</view>
				</picker>
				<view class="iconfont icon-xuanzeqixiayige" style="color: #c0c4cc;margin-left: 10rpx;"></view>
			</view>
			<!-- 选择学院 ——end -->
			<!-- 数据统计 ——start -->
			<view class="data_statistics">
				<view class="top">
					<view class="lable">
						<view class="iconfont icon-xiexian" style="color: #909090;font-size: 50rpx;font-weight: 800;">
						</view>
						<text style="font-weight: 700;margin-left: 5rpx;">统计</text>
					</view>
					<view class="line">
						data statistics
					</view>
				</view>
				<!-- 图表 -start -->
				<view class="chart" v-show="haveData">
					<view v-for="(item,index) in circleData" :key="index">
						<view v-if="item.series[0].name === '心理健康类'">
							<view class="tip_other" style="margin-bottom: 20rpx;">
								<text class="iconfont icon-duigou" style="color: #909090;margin-right: 10rpx;"></text>
								<text>学校已不要求选修，需自行任修一分弥补此分</text>
							</view>
						</view>
						<view class="progress_block">
							<view class="describe" :class="'block_' + index">
								<view class="name">{{item.series[0].name}}</view>
								<view class="value">共需修:{{item.series[0].score}}分</view>
								<view class="value">已修:{{item.series[0].value}}分</view>
							</view>
							<view class="charts-box arcbar" style="background-color: #FCFCFC;">
								<qiun-data-charts type="arcbar"
								canvas2d="true"
									:chartData="{series:[{data:item.series[0].data,color:item.series[0].color}]}"
									:canvasId="'four_a_kkkkkkkkkkaaa'+index"  :resshow="delayload"
									:opts="{title:{name:item.series[0].precent,color:item.series[0].color,fontSize:15},subtitle:{name:'',color:'#666666',fontSize:12},extra:{arcbar:{backgroundColor:item.series[0].backgroundColor}}}" />
							</view>
						</view>
					</view>

					<!-- 其他类 ——start -->
					<view class="tip_other" style="display: flex;">
						<text class="iconfont icon-tishi" style="color: #EEC900;flex: 1;"></text>
						<text style="flex: 15;">修满上述学分后，剩余学分可选修"其他类"</text>
					</view>
					<view class="progress_block other">
						<view class="describe"
							style="background-color: #FF7F24;display: flex;align-items: center;padding: 0;padding-left: 20rpx;">
							<view class="name">{{other.name}}</view>
						</view>
						<view class="charts-box"
							style="background-color: #FCFCFC;display:flex;align-items: center;justify-content: center;">
							<text
								style="font-size: 30rpx;letter-spacing: 4rpx;color: #FF7F24;font-weight: 700;">已修:{{other.ihave}}分</text>
						</view>
					</view>
					<!-- 其他类 ——end -->
					<!-- 提示 ——start -->
					<view class="tip_other" style="margin-bottom: 20rpx;display: flex;" v-if="isTwenty">
						<text class="iconfont icon-jinggao" style="color: #EEC900;margin-right: 10rpx;flex: 1;"></text>
						<text style="flex: 15">需要确保所有的分加起来是12分，任意的选课都可以填补剩余的两分（马克思和体育）</text>
					</view>
					<!-- 提示 ——end -->
				</view>
				<!-- 图表 -end -->
			</view>
			<!-- 数据统计 ——end -->
			<!-- 具体情况 ——start -->
			<view class="details">
				<view class="top">
					<view class="lable">
						<view class="iconfont icon-xiexian" style="color: #909090;font-size: 50rpx;font-weight: 800;">
						</view>
						<text style="font-weight: 700;margin-left: 5rpx;">详情</text>
					</view>
					<view class="line">
						details
					</view>
				</view>
				<!-- 列表 ——start -->
				<view class="list">
					<u-collapse :value="['2']" class="box">
						<u-collapse-item v-for="(item,index) in detailData" :title="item.bigName" :key="index">
							<view style="background-color: #FFFFFF;margin-bottom: 30rpx;" class="smallList_two"
								v-for="(item1,index1) in item.smallVo" :key="item1">
								<view class="smallName">
									<view style="font-weight: 700;margin-right: 20rpx;width: 20%;">模块:</view>
									<view style="width: 80%;font-weight: 700;">{{item1.smallName}}</view>
								</view>
								<view v-if="item1.selectedVoList.length != 0" class="classlist"
									v-for="(item2,index2) in item1.selectedVoList" :key="item2">
									<view class="className">
										<view style="margin-right: 20rpx;width: 20%;">课程:</view>
										<view style="width: 80%;font-weight: 700;">{{item2.selectedName}}</view>
									</view>
									<view class="className" style="margin-top: 12rpx;">
										<view style="margin-right: 20rpx;width: 20%;">学分:</view>
										<view style="width: 80%;">{{item2.selectedScore}}分</view>
									</view>
								</view>
								<view v-if="item1.selectedVoList.length == 0"
									style="display: flex; justify-content: center;align-items: center;height: 100rpx;font-size: 30rpx;padding: 10rpx;font-weight: 700;">
									<text v-if="item1.smallName === '马克思主义中国化进程与青年学生使命担当'">学校已统一安排必修</text>
									<text v-else-if="item1.smallName ==='大学生心理健康教育'">学校已不要求选修，需自行任修一分弥补此分</text>
									<text v-else>未选该模块课程</text>
								</view>
							</view>
						</u-collapse-item>
					</u-collapse>
					<!-- 选错课程 - -start-->
					<!-- 					<view class="tip_other" style="margin-top: 10rpx;margin-bottom: 10rpx;">
						<text class="iconfont icon-jinggao" style="color: #EEC900;margin-right: 10rpx;"></text>
						<text>以下为未按照本学院的人才培养方案选择的课程</text>
					</view> -->
					<uni-collapse class="list" @change="openinvalidSelect()">
						<uni-collapse-item title-border="none" :border="false" :showArrow="false" class="box"
							style="background-color: #f8f8f8;">
							<template v-slot:title>
								<view
									style="height: 80rpx; display: flex;font-size: 35rpx;align-items: center;background-color: #f8f8f8;position: relative;">
									<view>培养方案规定以外的课</view>
									<u-icon name="arrow-down" color="#909399"
										style="position: absolute;right: 0rpx;flex;font-size: inherit;"
										:class="{ 'u-arrow-down-icon-active': open }" class="u-arrow-down-icon">
									</u-icon>
								</view>
							</template>
							<view class="content" style="background-color: #f8f8f8;">
								<view style="background-color: #FFFFFF;" class="smallList_two"
									v-for="(item3,index3) in invalidSelectedData" :key="index3">
									<view class="smallName">
										<view style="font-weight: 700;margin-right: 20rpx;width: 20%;">模块:</view>
										<view style="width: 80%;font-weight: 700;font-size: 32rpx;">{{item3.smallName}}
										</view>
									</view>
									<view class="classlist">
										<view class="className">
											<view style="margin-right: 20rpx;width: 20%;;">课程:</view>
											<view style="width: 80%;font-weight: 700;">{{item3.selectedName}}</view>
										</view>
										<view class="className" style="margin-top: 8rpx;">
											<view style="margin-right: 20rpx;width: 20%;">学分:</view>
											<view style="width: 80%;">{{item3.selectedScore}}分</view>
										</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<!--  选错课程 - -end-->
				</view>
				<!-- 列表 ——end -->
			</view>
			<!-- 具体情况 ——end -->
		</view>
		<view v-if="show === 2" class="page" :style="'height:' + height + 'rpx'">
			<view class="tip">
				<view class="iconfont icon-zanwushuju" style="color:#23b8ff;margin-right: 25rpx;"></view>
				<view style="font-size: 32rpx;">抱歉，由于选课要求不同，<br />该功能只对20级和21级同学开放</view>
			</view>
		</view>
		<view v-if="show === 0" >
			<view class="noDataTip">
				<view class="iconfont icon-wuanpai" style="color:#6B6B6B;margin-right: 25rpx;font-size: 45rpx;"></view>
				<view style="font-size: 45rpx;">暂无记录，请稍后重试!</view>
			</view>
		</view>
	</view>
</template>

<script>
	let interstitialAd = null;
	import card from "../../components/card/card.vue"
	export default {
		onLoad() {
			// if (Math.floor((Math.random()*100)+1)%3 === 0) {
			//                 this.showAd = false
			//         }
			uni.getStorage({
				key: 'imgSrc',
				success: (res) => {
					console.log(1)
					const arr = JSON.parse(res.data);
					this.imgSrcArr = arr
					this.imgSrc = this.imgSrcArr[0]
					const img = this.imgSrcArr.shift()
					this.imgSrcArr.push(img)
					uni.setStorage({
						key: 'imgSrc',
						data: JSON.stringify(this.imgSrcArr),
						success: function () {
							console.log('success');
						}
					});
				},
				fail: () => {
					console.log(3)
					this.imgSrc = this.imgSrcArr[0]
					const img = this.imgSrcArr.shift()
					this.imgSrcArr.push(img)
					uni.setStorage({
						key: 'imgSrc',
						data: JSON.stringify(this.imgSrcArr),
						success: function () {
							console.log('success');
						}
					});
				}
			});
		},
		onShow() {
			// this.interstitialShow(0)
		},
		onHide() {
			// console.log("onHide监听页面隐藏")
			if (interstitialAd) {
				interstitialAd = null;
			}
		},
		// onUnload() {
		// 	console.log("onUnload监听页面卸载")
		// 	if (interstitialAd) {
		// 			interstitialAd.destroy();
		// 	}
		// },	
		created() {
			let that = this;
			// let num = Math.round(Math.random()); //获取随机数为 0 / 1
			// console.log(num)
			// if (num) {
			// 	// this.showShadow = true;
				

			// } else {
			// 	// this.showShadow = false;
			// }
			setTimeout(() => {
				that.interstitialShow(0)
			},300)
			// setTimeout(() => {
			// 	that.showShadow = true
			// }, 500)
			uni.getSystemInfo({
				success: function(res) {
					let pxToRpxScale = 750 / res.windowWidth;
					that.height = res.windowHeight * pxToRpxScale;
				}
			});
			this.getData();
		},
		mounted() {},
		data() {
			return {
				showAd:true,
				imgSrc: '',
				imgSrcArr: ['http://1.14.247.152:9797/images/饿了么.jpg', 'http://1.14.247.152:9797/images/美团.jpg'],
				showShadow: false,
				isTwenty: true, //20级
				init: true, //初始化获得当前所在学院
				show: 0,
				height: 0, //屏幕高度
				labelStyle: {
					fontSize: '32rpx'
				},
				haveData: false,
				collegeIndex: 0,
				collegeArray: ['城乡建设学院', '动物科技学院', '管理学院', '何香凝艺术设计学院', '化学与化工学院', '机电工程学院', '计算科学学院', '经贸学院', '农业与生物学院',
					'轻工食品学院', '人文与社会科学学院', '外国语学院', '信息科学与技术学院', '园艺园林学院', '资源与环境学院', '自动化学院'
				],
				finalData: [], //获取到的数据
				detailData: [], //详情数据
				open: false, //打开无效课程
				invalidSelectedData: [],
				tryData: [1, 2, 3, 4],
				haveInvalidSelected: false, //有选择无效课程
				cicleStyle: [{
						"series": [{
							"color": "#87CEFA",
							"data": "",
							"precent": "",
							"index": 0,
							"legendShape": "circle",
							"name": "",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "0",
							"score": "0"
						}]
					},
					{
						"series": [{
							"color": "#EEAEEE",
							"data": 0.3717,
							"precent": "37.17%",
							"index": 0,
							"legendShape": "circle",
							"name": "",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "1096",
							// "backgroundColor": "#F55676"
						}]
					},
					{
						"series": [{
							"color": "#FAB215",
							"data": 0.0017,
							"precent": "0.17%",
							"index": 0,
							"legendShape": "circle",
							"name": "",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "147604",
							// "backgroundColor": "#FAB215"
						}]
					},
					{
						"series": [{
							"color": "#B0C4DE",
							"data": 0.0017,
							"precent": "0.17%",
							"index": 0,
							"legendShape": "circle",
							"name": "",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "147604",
							// "backgroundColor": "#FAB215"
						}]
					},
					{
						"series": [{
							"color": "#9BCD9B",
							"data": 0.0017,
							"precent": "0.17%",
							"index": 0,
							"legendShape": "circle",
							"name": "",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "147604",
							// "backgroundColor": "#FAB215"
						}]
					},
					{
						"series": [{
							"color": "#87CEFA",
							"data": "",
							"precent": "",
							"index": 0,
							"legendShape": "circle",
							"name": "",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "0",
							"score": "0"
						}]
					}
				],
				circleData: [],
				other: { //其他类数据
					name: "",
					ihave: ""
				}
			}

		},
		computed: {
			pageStyle() {
				if (this.showShadow) {
					return 'overflow: hidden; height:' + this.height + 'rpx';
				} else {
					console.log('改变')
					return ' height:' + this.height + 'rpx';
				}
			}
		},
		methods: {
			interstitialShow(times) { //显示插屏广告
				var that = this;
				setTimeout(() => {
					if (interstitialAd) {
						console.log('插屏广告正在显示....');
						interstitialAd.show().catch((err) => {
							// console.error("插屏广告显示失败：", err);
							switch (err.errCode) {
								case 2001:
									//打开小程序一定时间内不允许展示
									that.interstitialShow(1000);
									break;
								case 2002:
									//距离小程序插屏广告或者激励视频广告上次播放时间间隔不足，不允许展示插屏广告
									that.interstitialShow(1000);
									break;
								default:
									break;
							}
						})
					}
				}, times)
			},
			collegeChange(e) {
				// console.log(e.detail);
				this.collegeIndex = e.detail.value;
				let params = {
					collegeId: ""
				};
				params.collegeId = Number(this.collegeIndex) + 1;
				// console.log(typeof params.id);
				this.finalData = []; //初始化数据
				this.detailData = [];
				this.circleData = [];
				this.invalidSelectedData = [];
				this.getData(params)

			},
			//获取数据
			async getData(params) {
				uni.showLoading({
					title: '加载中..',
					mask: true
				});
				let header = new Object()
				header.Authority = uni.getStorageSync("Authority");
				let res;
				if (params) {
					res = await getApp().UniRequest("/selected/authority/myChoice", "Get", params, header);
					// console.log(params.collegeId)
				} else {
					res = await getApp().UniRequest("/selected/authority/myChoice", "Get", "", header);
				}

				// console.log(res.data);
				if (res.code === 20000) {
					this.show = 1;
					if (this.init) {
						this.collegeIndex = res.data.rule[0].collegeId - 1;
						this.init = false
					}
					
					this.finalData = res.data.rule;
					this.invalidSelectedData = res.data.invalidSelected;
					this.processData();
					this.haveData = true; //用v-if控制，等数据处理好后再插入图表，否则加上在初始化图表时调用的函数，会超过调用栈
					this.getDetailData();
					uni.hideLoading();
				} else if (res.code === 20006) {
					this.show = 2;
					uni.hideLoading();
				} else {
					this.show = 0
				}
			},
			//处理数据
			processData() {
				// console.log('执行')
				let that = this;
				this.finalData.forEach((item, index) => {
					if (item.bigName === "其他类") {
						this.other.name = item.bigName;
						this.other.ihave = item.ihave;
					} else {
						this.circleData.push(this.cicleStyle[this.circleData.length]);
						this.circleData[this.circleData.length - 1].series[0].name = item.bigName;
						let ihave = item.ihave;
						if (item.bigName === "限定选修类") {
							// let smallVo = item.smallVo;
							// let score = item.score;
							// smallVo.forEach((item, index) => {
							// 	if (item.smallName === "马克思主义中国化进程与青年学生使命担当") {
							// 		score = Number(score);
							// 		score--;
							// 		console.log(score)
							// 	}
							// })
							// item.score = score.toString();
						} else if (item.bigName === "心理健康类") {
							ihave = 1;
							this.isTwenty = false;
						} else {}
						this.circleData[this.circleData.length - 1].series[0].score = item.score;
						this.circleData[this.circleData.length - 1].series[0].value = ihave;
						let dataPoint = ihave / item.score;
						this.circleData[this.circleData.length - 1].series[0].data = dataPoint < 1 ? dataPoint : 1;
						let precentTemp = Number(dataPoint * 100).toFixed();
						precentTemp = Number(precentTemp) < 100 ? Number(precentTemp) : 100
						precentTemp += "%";
						this.circleData[this.circleData.length - 1].series[0].precent = precentTemp
					}
				})
				// console.log('数据',this.circleData)

			},
			//获取详情数据
			getDetailData() {
				// console.log('数据', this.finalData)
				let otherIndex;
				this.finalData.forEach((item, index) => {
					if (item.bigName != "其他类") {
						this.detailData.push(item);
						// if (item.bigName === "限定选修类") {
						// 	let smallVo = [];
						// 	item.smallVo.forEach((item, index) => {
						// 		if (item.smallName != "马克思主义中国化进程与青年学生使命担当") {
						// 			smallVo.push(item)
						// 		}
						// 	});
						// 	item.smallVo = smallVo;
						// }
					} else {
						otherIndex = index;
					}
				});
				this.detailData.push(this.finalData[otherIndex]); //将其他类放在最后
				// console.log('详情数据', this.detailData)
			},
			openinvalidSelect() {
				// console.log('执行')
				// console.log(this.open)
				this.open = !this.open;
			},
			closeAd() {
				this.showAd=false;
			},
			
			previewImg() {
			                let _this = this;
			                let imgsArray = [];
			                imgsArray[0] = this.imgSrc
			                uni.previewImage({
			                    current: 0,
			                    urls: imgsArray
			                });
			}
			
		},
		components: {
			card
		}
	}
</script>

<style lang="less" scoped>
	.page {
		width: 100%;
		background-color: #f8f8f8;
		position: relative;

		/deep/ .u-image {
			
			// border-radius: 35px !important;
			
			.u-image__image {
				border-radius: 25px !important;
			}
		}
		
		.noDataTip {
			height: 150rpx;
			width: 650rpx;
			line-height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 50%;
			margin-top: -150rpx;
			left: 50%;
			margin-left: -325rpx;
			font-size: 50rpx;
			color: #6B6B6B;
			// background-color: #fff;
			// box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;
			border-radius: 20rpx;
		}

		.u-arrow-down-icon {
			transition: all 0.3s;
			margin-right: 20rpx;
			margin-left: 14rpx;
		}

		.u-arrow-down-icon-active {
			transform: rotate(180deg);
			transform-origin: center center;
		}

		// padding: 25rpx;
		::v-deep .u-collapse .u-collapse-item .u-collapse-head {
			height: 80rpx;
			font-size: 35rpx;
		}

		::v-deep .u-collapse .u-collapse-item .u-collapse-title {}

		::v-deep .u-collapse .u-collapse-item .u-collapse-body {
			// padding: 10rpx;
			// height: 300rpx;
		}

		.tip {
			height: 150rpx;
			width: 650rpx;
			line-height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 50%;
			margin-top: -75rpx;
			left: 50%;
			margin-left: -325rpx;
			background-color: #fff;
			box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;
			border-radius: 20rpx;
		}

		.head {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			letter-spacing: 2rpx;
			// margin-top: 10rpx;

			.lable {
				display: flex;
				font-size: 32rpx;
				font-weight: 700;
				margin-left: 20rpx;
			}

			.itemPicker {
				font-weight: 500;
				// width: 150rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

		}

		.data_statistics {
			width: 100%;
			margin-top: 20rpx;
			padding: 25rpx;
			padding-top: 0rpx;
			// background-color: #FFFFFF;
			background-color: #f8f8f8;

			.top {
				display: flex;
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;

				.lable {
					height: 100%;
					width: 20%;
					display: flex;
					font-size: 38rpx;

				}

				.line {
					width: 80%;
					height: 100%;
					padding-left: 20rpx;
					line-height: 89rpx; //使它底线对齐
					color: #90909d;
					border-bottom: 2rpx solid #90909d;
				}
			}

			.chart {
				margin-top: 20rpx;
				padding-left: 15rpx;
				padding-right: 15rpx;

				.progress_block {
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 100%;
					margin-bottom: 20rpx;
					border-radius: 20rpx;
					height: 180rpx;
					position: relative;
					overflow: hidden;
					background-color: #fff;
					box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;

					.describe {
						width: 60%;
						height: 100%;
						padding: 20rpx;
						letter-spacing: 4rpx;

						.name {
							color: #fff;
							height: 40%;
							font-size: 36rpx;
							font-weight: 800;
						}

						.value {
							color: #fff;
							font-size: 26rpx;
							height: 30%;
							// max-width: 144rpx;
						}
					}

					.charts-box {
						width: 40%;
						height: 100%;
					}
				}

				.other {
					margin-top: 20rpx;
					height: 130rpx;
				}

				.tip_other {
					margin-top: 10rpx;
					letter-spacing: 2rpx;
					color: #2E2E2E;
				}

				.block_0 {
					background-color: #87CEFA;
				}

				.block_1 {
					background-color: #EEAEEE;
				}

				.block_2 {
					background-color: #FAB215;
				}

				.block_3 {
					background-color: #B0C4DE;
				}

				.block_4 {
					background-color: #9BCD9B;
				}

				.block_5 {
					background-color: #87CEFA;
				}
			}

		}

		.details {
			width: 100%;
			padding: 0rpx 25rpx 50rpx 25rpx;
			// background-color: #FFFFFF;
			background-color: #f8f8f8;

			.top {
				display: flex;
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;

				.lable {
					height: 100%;
					width: 20%;
					display: flex;
					font-size: 38rpx;

				}

				.line {
					width: 80%;
					height: 100%;
					padding-left: 20rpx;
					line-height: 89rpx; //使它底线对齐
					color: #90909d;
					border-bottom: 2rpx solid #90909d;
				}
			}

			.list {
				width: 90%;
				margin: 0 auto;
				margin-top: 20rpx;

				// .smallList {
				// 	margin-top: 12rpx;
				// 	margin-bottom: 15rpx;
				// 	// border-bottom: 1rpx solid #909090;
				// 	font-size: 32rpx;
				// 	color: #1F1F1F;
				// 	line-height: 80rpx;

				// 	.title {
				// 		font-weight: 700;
				// 		margin-right: 20rpx;
				// 	}
				// }
				.smallList_two,
					{
					border-radius: 10rpx;
					width: 98%;
					color: #1F1F1F;
					padding: 0 15rpx;
					padding-top: 10rpx;
					letter-spacing: 4rpx;
					padding-bottom: 10rpx;
					box-shadow: 0.2rpx 0.2rpx 20rpx #F2F2F2;

					.smallName {
						padding-left: 20rpx;
						font-size: 32rpx;
						line-height: 45rpx;
						display: flex;
						padding-bottom: 10rpx;
						margin-bottom: 10rpx;
						border-bottom: 1rpx solid #C4C4C4;

					}

					.classlist {
						padding-left: 28rpx;
						// margin-top: 10rpx;
						margin-bottom: 35rpx;

						.className {
							font-size: 30rpx;
							line-height: 48rpx;
							display: flex;
						}
					}
				}
			}
		}
	}
</style>
